<template>
    <view v-if="!weeks.disable" class="uni-calendar-item__weeks-box" :class="{
		'uni-calendar-item--disable': weeks.disable,
		'uni-calendar-item--isDay': calendar.fullDate === weeks.fullDate && weeks.isDay,
		'uni-calendar-item--checked': (calendar.fullDate === weeks.fullDate && !weeks.isDay) ,
		'uni-calendar-item--before-checked': weeks.beforeMultiple,
		'uni-calendar-item--multiple': weeks.multiple,
		'uni-calendar-item--after-checked': weeks.afterMultiple,
		}" @click="choiceDate(weeks)">
        <view class="uni-calendar-item__weeks-box-item"
            :style="{background: calendar.fullDate === weeks.fullDate ? '' : returnBackgroud(weeks.extraInfo)}">
            <text class="uni-calendar-item__weeks-box-text" :class="{
				'uni-calendar-item--isDay-text': weeks.isDay,
				'uni-calendar-item--isDay--inner':calendar.fullDate === weeks.fullDate && weeks.isDay,
				'uni-calendar-item--checked--inner':calendar.fullDate === weeks.fullDate && !weeks.isDay,
				'uni-calendar-item--before-checked':weeks.beforeMultiple,
				'uni-calendar-item--multiple': weeks.multiple,
				'uni-calendar-item--after-checked':weeks.afterMultiple,
				'uni-calendar-item--disable':weeks.disable,
				}">
                {{ weeks.isDay ? todayText : weeks.date }}
            </text>
        </view>
        <view style="position: absolute;bottom: -4rpx;height: 16rpx;width: auto;display: flex;gap: 6rpx;"
            v-if="!(calendar.fullDate === weeks.fullDate)">
            <text v-for="(item, index) in weeks.extraInfo.typeList" :key="index"
                style="width: 16rpx;height: 16rpx;border-radius: 50%;display: block;"
                :style="{background: item === 1 ? '#ff6722' : item === 2 ? '#FE85CA' : item === 3 ? '#7B72FC' : 'transparent'}" />
        </view>
    </view>
</template>

<script>
    import {
        initVueI18n
    } from '@dcloudio/uni-i18n'
    import i18nMessages from './i18n/index.js'

    const {
        t
    } = initVueI18n(i18nMessages)

    export default {
        emits: ['change'],
        props: {
            weeks: {
                type: Object,
                default () {
                    return {}
                }
            },
            calendar: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            selected: {
                type: Array,
                default: () => {
                    return []
                }
            },
            lunar: {
                type: Boolean,
                default: false
            }
        },
        computed: {
            todayText() {
                return t("uni-calender.today")
            },
        },
        methods: {
            choiceDate(weeks) {
                this.$emit('change', weeks)
            },
            /*
            1:当次实际经期
            2:当次预测经期
            3:当次预计排卵日
            4:当次预计排卵期
            5:下次预计经期
            */
            returnBackgroud(type) {
                var typeColor = null;
                if (type === undefined) {
                    return typeColor;
                }
                switch (type.info) {
                    case 1:
                        typeColor = '#FE85CA';
                        break;
                    case 2:
                        typeColor = `repeating-linear-gradient(-45deg, #F6BADC 0 7rpx, #F7D1E8 7rpx 14rpx)`
                        break;
                    case 3:
                        typeColor = `repeating-linear-gradient(-45deg, #7EE1F6 0 7rpx, #ABEAF9 7rpx 14rpx)`
                        break;
                    case 4:
                        typeColor = `repeating-linear-gradient(-45deg, #B9A2FA 0 7rpx, #D1C2F9 7rpx 14rpx)`
                        break;
                    case 5:
                        typeColor = `repeating-linear-gradient(-45deg, #F6BADC 0 7rpx, #F7D1E8 7rpx 14rpx)`
                        break;
                }
                return typeColor
            },
            returnExtraInfoColor(type) {
                var typeColor = '';
                if (type === '') {
                    return typeColor;
                }
                // 1表示无措施 2表示由措施 3表示其他
                switch (type) {
                    case 1:
                        typeColor = '#D5D2FF';
                        break;
                    case 2:
                        typeColor = `#FE85CA`;
                        break;
                    case 3:
                        typeColor = `#7B72FC`;
                        break;
                }
                return typeColor
            }
        }
    }
</script>

<style lang="scss" scoped>
    $uni-font-size-base: 14px;
    $uni-text-color: #333;
    $uni-font-size-sm: 12px;
    $uni-color-error: #e43d33;
    $uni-opacity-disabled: 0.3;
    $uni-text-color-disable: #c0c0c0;
    $uni-primary: #2979ff !default;

    .uni-calendar-item__weeks-box {
        flex: 1;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .uni-calendar-item__weeks-box-text {
        font-size: $uni-font-size-base;
        color: $uni-text-color !important;
    }

    .uni-calendar-item__weeks-lunar-text {
        font-size: $uni-font-size-sm;
        color: $uni-text-color;
        position: absolute;
        bottom: -20rpx;
    }

    .uni-calendar-item__weeks-box-item {
        position: relative;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 68rpx;
        height: 68rpx;
        margin: 16rpx auto;
        border-radius: 60rpx;
    }

    .uni-calendar-item__weeks-box-circle {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 8px;
        height: 8px;
        border-radius: 60px;
        background-color: $uni-color-error;
    }

    .uni-calendar-item--disable {
        background-color: rgba(249, 249, 249, $uni-opacity-disabled);
        color: $uni-text-color-disable;
    }

    .uni-calendar-item--isDay-text {
        color: #FF7CCF;
    }

    .uni-calendar-item--isDay {
        background-color: #FF7CCF;
        color: #fff;
        position: relative;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 60rpx;
        width: 68rpx;
        height: 68rpx;
        margin: 16rpx auto;
    }

    .uni-calendar-item--isDay--inner {
        background-color: #FF7CCF;
        color: #fff;
        margin: -12rpx 0;
        position: relative;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 60rpx;
    }

    .uni-calendar-item--extra {
        color: $uni-color-error;
        opacity: 0.8;
    }

    .uni-calendar-item--checked {
        background-color: #FF7CCF;
        color: #fff;
        position: relative;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 60rpx;
        width: 68rpx;
        height: 68rpx;
        margin: 16rpx auto;
    }

    .uni-calendar-item--checked--inner {
        background-color: #FF7CCF;
        color: #fff;
        margin: -12rpx 0;
        position: relative;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 60rpx;
        width: 68rpx;
        height: 68rpx;
    }

    .uni-calendar-item--multiple {
        background-color: #FF7CCF;
        color: #fff;
        position: relative;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 60rpx;
    }

    .uni-calendar-item--before-checked {
        background-color: #ff5a5f;
        color: #fff;
        position: relative;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 60rpx;
    }

    .uni-calendar-item--after-checked {
        background-color: #ff5a5f;
        color: #fff;
        position: relative;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 60rpx;
    }
</style>